<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HIS hospital info</title>

    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/demo/demo.css">

    <!-- pure grid css -->
    <link rel="stylesheet" href="../lib/pure-release-0.6.0/grids-min.css">

    <!-- my test css -->
    <style type="text/css">
        /*.pure-g div{*/
             /*background-color: rgba(8, 19, 14, 0.11);*/
             /*border-left:1px solid red;*/
         /*}*/
    </style>

    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
    <div id="id_clinicRP">
        <div id="main_layout" class="easyui-layout" style="width:100%;height:100%;">
            <div data-options="region:'east',title:'',split:false,border:true" style="width:450px;">
                <div id="id_east" class="easyui-panel" style="width:100%;" title="  ">
                    <form id="ff">
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>诊断</p></div>
                            <div class="pure-u-1-3"><p>感冒</p></div>
                            <div class="pure-u-1-3">
                                <input type="checkbox">匹配药品
                            </div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>处方类型</p></div>
                            <div class="pure-u-1-3"><p>普通,急诊,精麻</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>处方模式</p></div>
                            <div class="pure-u-1-3"><p>非中药处方,中药处方</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>处方模式</p></div>
                            <div class="pure-u-1-3"><p>非中药处方,中药处方</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>药品</p></div>
                            <div class="pure-u-1-3"><p>检索拼音简码</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>单次用量</p></div>
                            <div class="pure-u-1-3"><p>10毫克</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>频率</p></div>
                            <div class="pure-u-1-3"><p>tid</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>用法</p></div>
                            <div class="pure-u-1-3"><p>口服</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>组号</p></div>
                            <div class="pure-u-1-3"><p>1</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>用药天数</p></div>
                            <div class="pure-u-1-3"><p>10天</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>售量</p></div>
                            <div class="pure-u-1-3"><p>2盒</p></div>
                        </div>
                        <div class="pure-g">
                            <div class="pure-u-1-2">
                                <a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
                            </div>
                            <div class="pure-u-1-2">

                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div data-options="region:'center',title:'',border:true">
                <div id="id_center"></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
var his = {};
//his.rgnum = 0;
$(function(){
    // 让panel组件适应当前窗口的宽度和高度.
    var body_w = $('body').width();
    var client_h = document.documentElement.clientHeight;

    $('#id_clinicRP').panel({
        width: (body_w-30),
        height: (client_h-45),
        closable: true,
        title: '门诊处方'
    });
    //
    var test_data = [
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'}
    ];
    //
    var strid = addRecipeGroup('处方一', test_data);
    addRecipeGroup('处方二', test_data);
    addRecipeGroup('处方三', test_data);
    //修改datagrid标题的方法.
    $('#'+strid).datagrid('getPanel').panel('setTitle', '修改后的title');
    //
    optEastPanel();
    //
    testcssstyle();
});
//添加一个处方组合.
function addRecipeGroup(){
    var args = arguments;
    //datagrid的标题为传入的第一个参数.
    var dg_title = args[0];
    //第二个参数为datagrid的column数据.
    var _data = args[1];
    //每次调用都增1的id种子.
    var rg = his.rgnum = his.rgnum+1 || 1;
    var strid = "id_dg0" + rg;
    var tpl = '<div id="{1}"></div>';
    $('#id_center').append( tpl.replace('{1}', strid) );
    $('#'+strid).datagrid({
        title: dg_title,
        singleSelect: true,
        columns:[[
            {field:'code',title:'Code',width:100},
            {field:'name',title:'Name',width:100},
            {field:'price',title:'Price',width:100,align:'right'}
        ]],
        data: _data
    });
    //将新添加的datagrid的ID返回.
    return strid;
}
//
function optEastPanel(){
    // $('#id_east').panel();
//    $('#id_east').css('width', '100%');
//    $.parser.parse('#id_east');
}
//
function testcssstyle(){
    var puregs = $('.pure-g');
    $.each(puregs, function(i,n){
        $(n).find('div:odd').css('backgroundColor','#e4e4e4');
    });
}
</script>
</html>